<template>
  <div>
    <g-map @map="getMap"></g-map>

    <marker-set-panel class="markerSetPanel" @selectIcon="showSelectIcon" @showList="showList"></marker-set-panel>

<!--     面板1
<div class="panle">
  <ul class="panle-ul">
    <li v-for="item in mapCheckList" :key="item.id" class="panle-li">
      <label :for="item.id">
        <img :src="mapChecked.indexOf(item.id) > -1 ? item.img : item.imgChecked" alt="">
        <p>{{item.name}}</p>
      </label>
      <input type="checkbox" name="mapChecked" v-model="mapChecked" :value="item.id" :id="item.id">
      <ul class="children-ul">
        <li v-for="(bili, index) in item.bilis" :key="'bili'+index">
          <input @change="goChange(item.bili, item.id)" v-model="item.bili" :id="'bili' + index + item.id" type="radio" :value="bili.value">
          <label :for="'bili' + index + item.id">{{bili.name}}</label>
        </li>
      </ul>
      <p class="currentCheck">{{checkedName(item.bili, item.bilis)}}</p>
    </li>
  </ul>
</div>

面板2
<div class="panle-1">
  <ul class="panle-ul">
    <li v-for="item in pointerPanelList" :key="item.id" class="panle-li">
      <label :for="item.id">
        <img :src="pointerCheckedList.indexOf(item.id) > -1 ? item.imgChecked : item.img" alt="">
        <p>{{item.name}}</p>
      </label>
      <input type="checkbox" name="pointerChecked" v-model="pointerCheckedList" :value="item.id" :id="item.id">
    </li>
  </ul>
  <div class="cancleMarker" @mousedown="clickCancel=false" @mouseup="clickCancel=true" @click="cancleMarker">
    <img :src="clickCancel ? require('../assets/images/mapIcon/cancel.png'):require('../assets/images/mapIcon/cancel1.png')" alt="撤销" title="撤销？">
  </div>
</div>
 -->
    <div class="panle-2">
      <div class="block">
        <input type="text" @input="getPlace" v-model="placeCenter" placeholder="关键字定位中心">
        <ul class="placeResult" v-if="showPlaceResult">
          <li v-for="(place, index) in placeResult" :key="index" @click="setCenter([place.location.lng, place.location.lat])">
            <span>
              {{place.name}}
            </span>
            <span>
              ({{place.district}})
            </span>
          </li>
        </ul>
        <span>查找</span>
      </div>
      <div class="block">
        <input type="text" v-model="position.x" placeholder="x坐标">
        <input type="text" v-model="position.y" placeholder="y坐标">
        <span @click="setCenter([position.x, position.y])">定位</span>
      </div>
    </div>
  </div>
</template>
<script>
import gMap from '@/components/amap'
import AMap from 'AMap'
import markerSetPanel from '@/components/markerSetPanel'
export default {
  name: 'demo',
  data () {
    return {
      markerSetData: {
        markers: [],
        maximum: 4
      },
      showPlaceResult: false,
      debounceTime: '',
      autocomplete: new AMap.Autocomplete(),
      clickCancel: true,
      listenerFlag: false,
      placeCenter: '',
      placeResult: [],
      position: {
        x: '',
        y: ''
      },
      map: '',
      markers: [],
      itemBill: [],
      mapChecked: [],
      pointerCheckedList: [],
      pointerPanelList: [{
        name: '警车',
        id: 'carPointer',
        img: require('../assets/images/mapIcon/map_car_normal.png'),
        imgChecked: require('../assets/images/mapIcon/map_car_selected.png')
      }, {
        name: '监控',
        id: 'camerPointer',
        img: require('../assets/images/mapIcon/map_vedio_normal.png'),
        imgChecked: require('../assets/images/mapIcon/map_vedio_selected.png')
      }],
      mapCheckList: [{
        name: '中心定位',
        id: 'center',
        img: require('../assets/images/mapIcon/map_focus_normal.png'),
        imgChecked: require('../assets/images/mapIcon/map_focus_selected.png'),
        bilis: [{
          value: 'lbgz',
          name: '荔波古镇'
        }, {
          value: 'dqk',
          name: '大七孔'
        }, {
          value: 'xqk',
          name: '小七孔'
        }, {
          value: 'lbqcz',
          name: '荔波汽车站'
        }, {
          value: 'lbyy',
          name: '荔波县中医院'
        }],
        bili: 'lbgz'
      }, {
        name: '干警',
        id: 'police',
        img: require('../assets/images/mapIcon/map_police_normal.png'),
        imgChecked: require('../assets/images/mapIcon/map_police_selected.png'),
        bilis: [{name: '800 : 1', value: 800}, {name: '600 : 1', value: 600}, {name: '400 : 1', value: 400}],
        bili: 800
      }, {
        name: '警车',
        id: 'car',
        img: require('../assets/images/mapIcon/map_car_normal.png'),
        imgChecked: require('../assets/images/mapIcon/map_car_selected.png'),
        bilis: [{name: '800 : 1', value: 800}, {name: '600 : 1', value: 600}, {name: '400 : 1', value: 400}],
        bili: 800
      }, {
        name: '重点布控',
        id: 'key',
        img: require('../assets/images/mapIcon/map_key_normal.png'),
        imgChecked: require('../assets/images/mapIcon/map_key_selected.png'),
        bilis: [{name: '800 : 1', value: 800}, {name: '600 : 1', value: 600}, {name: '400 : 1', value: 400}],
        bili: 800
      }]
    }
  },
  methods: {
    showSelectIcon (data) {
      this.pointerCheckedList = data
    },
    showList (data) {
      console.log(data)
    },
    getPlace () {
      clearTimeout(this.debounceTime)
      this.debounceTime = setTimeout(() => {
        this.autocomplete.search(this.placeCenter, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            this.placeResult = result.tips
            this.showPlaceResult = true
            console.log(this.placeResult)
          }
        })
      }, 400)
    },
    getMap (map) {
      this.map = map
    },
    goChange (value, id) {
      if (id === 'center') {
        this.setCenter(value)
      }
    },
    checkedName (value, arr) {
      for (var i = 0, l = arr.length; i < l; i++) {
        if (value === arr[i].value) {
          return arr[i].name
        }
      }
    },
    setCenter (centerValue) {
      var pointer = ''
      if (!this.map) {
        return
      }
      switch (centerValue) {
        case 'dqk':
          pointer = [107.749921, 25.280235]
          break
        case 'lbgz':
          pointer = [107.89283, 25.411412]
          break
        case 'xqk':
          pointer = [107.712875, 25.248395]
          break
        case 'lbqcz':
          pointer = [107.884957, 25.416361]
          break
        case 'lbyy':
          pointer = [107.879018, 25.40225]
          break
        default:
          pointer = centerValue
      }
      var zoom = this.map.getZoom()
      if (!pointer[0]) {
        alert('x坐标必填')
        return
      }
      if (!pointer[1]) {
        alert('y坐标必填')
        return
      }
      this.map.setZoomAndCenter(zoom, pointer)
      this.showPlaceResult = false
    },
    cancleMarker () {
      this.markers[this.markers.length - 1] && this.map.remove(this.markers[this.markers.length - 1].marker)
      this.markers.pop()
      this.saveMarkers(this.markers)
    },
    saveMarkers (markers) {
      var markersMsg = markers.map(v => v.msg)
      window.localStorage.setItem('markersMsg', JSON.stringify(markersMsg))
    },
    setMarker ({position, icon}) {
      if (!this.map) {
        return
      }
      var marker = new AMap.Marker({
        icon: require(`../assets/images/mapIcon/${icon}.png`),
        offset: new AMap.Pixel(-24, -20),
        position: position,
        bubble: false
      })
      this.map.add([marker])
      this.markers.push({
        marker,
        msg: {
          icon,
          position
        }
      })
      this.saveMarkers(this.markers)
    },
    markerHandle (e) {
      /* var icon
      var position = [e.lnglat.lng, e.lnglat.lat] */
      console.log(e)
      /* switch (this.pointerCheckedList[0]) {
        case 'icon_car':
          icon = 'icon_car'
          break
        case 'icon_video':
          icon = 'icon_video'
          break
        default:
          icon = 'icon_point'
          break
      }
      this.setMarker({position, icon}) */
    },
    markerListener ({type}) {
      if (type === 'add') {
        if (!this.listenerFlag) {
          this.map.on('click', this.markerHandle)
          this.listenerFlag = true
        }
      } else {
        console.log('remove')
        this.map.off('click', this.markerHandle)
        this.listenerFlag = false
      }
    },
    markersInit () {
      var markersMsg = JSON.parse(window.localStorage.getItem('markersMsg')) || []
      markersMsg.forEach(v => {
        this.setMarker({icon: v.icon, position: v.position})
      })
    },
    markerMsgHandle (e) {
      console.log(this.map.getAllOverlays('marker'))
    },
    markerShowManage (markerType) {
      this.markers.forEach(v => {
        if (markerType === 'all') {
          v.marker.show()
          return
        }
        if (v.msg.icon === markerType) {
          v.marker.show()
        } else {
          v.marker.hide()
        }
      })
    }
  },
  watch: {
    pointerCheckedList (cur) {
      var l = cur instanceof Array && cur.length
      l > 0 ? this.markerListener({type: 'add'}) : this.markerListener({type: 'remove'})
      if (l < 2) {
        return this.markerShowManage(cur[l - 1])
      }
      this.pointerCheckedList = [cur[l - 1]]
    },
    mapChecked (cur) {
      if (cur.indexOf('car')) {
        console.log('car')
      }
    }
  },
  mounted () {
    this.setCenter('lbgz')
    this.markersInit()
    this.markerMsgHandle()
  },
  components: {
    gMap,
    markerSetPanel
  }
}
</script>
<style rel="stylesheet/less" lang="less">
/*   .panle {
  position: fixed;
  bottom: 50px;
  left: 50px;
  &-ul {
    list-style: none;
    background-color: rgba(0, 0, 0, 0.7);
    float: left;
    border-radius: 20px;
  }
  &-li {
    padding: 15px;
    float: left;
    width: 100px;
    color: #fff;
    &:hover .children-ul {
      display: block;
    }
    input {
      display: none;
    }
  }
  .children-ul {
    display: none;
    list-style: none;
    position: absolute;
    bottom: 100%;
    color: red;
    text-align: center;
    padding: 20px;
    border-radius: 5px;
    >li {
      background-color: rgba(0, 0, 0, 0.7);
      padding: 15px;
      &:first-child {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
      &:last-child {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }
      >label {
        color: #fff;
      }
      input:checked + label {
        color: red;
      }
    }
  }
  .currentCheck {
    margin-top: 15px;
    line-height: 21px;
  }
}
.panle-1 {
  position: fixed;
  bottom: 50px;
  right: 50px;
  .cancleMarker {
    position: absolute;
    width: 30px;
    right: 0;
    bottom: 100%;
    cursor: pointer;
    img {
      width: 100%;
    }
  }
  &-ul {
    list-style: none;
    background-color: rgba(0, 0, 0, 0.7);
    float: left;
    border-radius: 20px;
  }
  &-li {
    padding: 15px;
    float: left;
    width: 100px;
    color: #fff;
    &:hover .children-ul {
      display: block;
    }
    input {
      display: none;
    }
  }
  .children-ul {
    display: none;
    list-style: none;
    position: absolute;
    bottom: 100%;
    color: red;
    text-align: center;
    padding: 20px;
    border-radius: 5px;
    >li {
      background-color: rgba(0, 0, 0, 0.7);
      padding: 15px;
      &:first-child {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
      &:last-child {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }
      >label {
        color: #fff;
      }
      input:checked + label {
        color: red;
      }
    }
  }
  .currentCheck {
    margin-top: 15px;
    line-height: 21px;
  }
}
.panle-2 {
  position: absolute;
  top: 20px;
  left: 20px;
  .block {
    float: left;
    .placeResult {
      position: absolute;
      list-style: none;
      max-height: 380px;
      overflow-y: auto;
      background-color: rgba(0, 0, 0, 0.7);
      >li {
        cursor: pointer;
        color: #fff;
        width: 230px;
        text-align: left;
        text-indent: 1em;
        padding: 8px 0;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        border-bottom: 1px solid #fff;
        >span {
          &:first-child {
            font-size: 16px;
            margin-right: 4px;
          }
          &:last-child {
            font-size: 12px;
          }
        }
      }
    }
    >input {
      text-indent: 1em;
      height: 30px;
    }
    >span {
      display: block;
      height: 30px;
      border: 2px solid rgb(66, 133, 244);
      background-color: rgb(66, 133, 244);
      color: #fff;
      font-size: 16px;
      padding: 0 10px;
      line-height: 30px;
      float: right;
      margin-right: 50px;
    }
  }
} */
  .markerSetPanel {
    position: absolute;
    bottom: 20px;
    left: 30px;
  }
</style>
